<template>
  <div class="buy-set-content pl16 pr16">
    <!--积分设置-->
    <div class="common-form">积分设置</div>
    <el-form-item label="是否开启积分赠送：">
      <el-radio-group v-model="form.model.isPointsGift">
        <el-radio :label="1">开启</el-radio>
        <el-radio :label="0">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否允许使用积分抵扣：">
      <el-radio-group v-model="form.model.isPointsDiscount">
        <el-radio :label="1">允许</el-radio>
        <el-radio :label="0">不允许</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      v-if="form.model.isPointsDiscount == 1"
      label="最大抵扣积分数量："
      :rules="[{ required: true, message: ' ' }]"
      prop="model.maxPointsDiscount"
    >
      <el-input
        type="number"
        min="0"
        v-model="form.model.maxPointsDiscount"
        class="max-w460"
      ></el-input>
    </el-form-item>
    <!--会员折扣设置-->
    <div class="common-form mt50">会员折扣设置</div>
    <el-form-item label="是否开启会员折扣：">
      <el-radio-group v-model="form.model.isEnableGrade">
        <el-radio :label="1">开启</el-radio>
        <el-radio :label="0">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="会员折扣设置：">
      <el-radio-group v-model="form.model.isAloneGrade">
        <el-radio :label="0">默认折扣</el-radio>
        <el-radio :label="1">单独设置折扣</el-radio>
      </el-radio-group>
      <div class="gray9" v-if="form.model.isAloneGrade == 0">
        默认折扣：默认为用户所属会员等级的折扣率
      </div>
    </el-form-item>

    <el-form-item label="折扣佣金类型：" v-if="form.model.isAloneGrade == 1">
      <el-radio-group
        v-model="form.model.aloneGradeType"
        @change="changeGradeType"
      >
        <el-radio :label="10">百分比</el-radio>
        <el-radio :label="20">固定金额</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="" v-if="form.model.isAloneGrade == 1">
      <div class="max-w460">
        <el-table :data="form.gradeList" border size="mini" style="width: 100%">
          <el-table-column prop="name" label="会员等级"> </el-table-column>
          <el-table-column prop="name" label="折扣">
            <template #default="scope">
              <div class="d-s-c">
                <el-input
                  v-model="scope.row.productEquity"
                  type="number"
                  placeholder="请输入折扣"
                ></el-input>
                <span class="ml10">{{ gradeUnit }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form-item>
    <div class="common-form mt50">表单信息收集</div>
    <el-form-item label="关联表单：">
      <div class="max-w460">
        <el-select
          v-model="form.model.tableId"
          placeholder="请选择"
          style="width: 460px"
        >
          <el-option
            v-for="item in form.tableList"
            :value="item.tableId"
            :key="item.tableId"
            :label="item.name"
          ></el-option>
        </el-select>
      </div>
    </el-form-item>
    <!-- <el-form-item label="自定义表单：">
      <el-switch
        :active-value="1"
        :inactive-value="0"
        v-model="customBtn"
        @change="customMessBtn"
        size="large"
      >
        <span slot="open">开启</span>
        <span slot="close">关闭</span>
      </el-switch>
      <div class="addCustom_content" v-if="customBtn">
        <div
          v-for="(item, index) in custom_form"
          :key="index"
          class="custom_box"
        >
          <el-input
            v-model.trim="item.title"
            :placeholder="'表单标题' + (index + 1)"
            style="width: 150px; margin-right: 10px"
            :maxlength="10"
          />
          <el-select
            v-model="item.label"
            style="width: 200px; margin-left: 6px; margin-right: 10px"
          >
            <el-option
              v-for="items in CustomList"
              :value="items.value"
              :key="items.value"
              :label="items.label"
            ></el-option>
          </el-select>
          <el-checkbox v-model="item.status">必填</el-checkbox>
          <div class="addfont" @click="delcustom()">
            <el-icon>
              <Delete />
            </el-icon>
          </div>
        </div>
      </div>
      <div class="addCustomBox" v-show="customBtn">
        <div class="btn" @click="addcustom">+ 添加表单</div>
        <div class="titTip">
          用户下单时需填写的信息，最多可设置10条，设置了自定义表单的商品不能加入购物车
        </div>
      </div>
    </el-form-item> -->
    <!--分销设置-->
    <!--    <div class="common-form" v-if="form.basicSetting.isOpen == 1">分销设置</div>-->
    <!--    <el-form-item label="是否开启分销：" v-if="form.basicSetting.isOpen == 1">-->
    <!--      <el-radio-group v-model="form.model.isAgent">-->
    <!--        <el-radio :label="0">关闭</el-radio>-->
    <!--        <el-radio :label="1">开启</el-radio>-->
    <!--      </el-radio-group>-->
    <!--    </el-form-item>-->
    <!--    <template v-if="form.model.isAgent === 1">-->
    <!--      <el-form-item label="分销规则：" v-if="form.basicSetting.isOpen == 1">-->
    <!--        <el-radio-group v-model="form.model.isIndAgent">-->
    <!--          <el-radio :label="0">平台规则</el-radio>-->
    <!--          <el-radio :label="1">单独规则</el-radio>-->
    <!--        </el-radio-group>-->
    <!--        <div class="gray9">平台规则：层级({{form.basicSetting.level}}级)-->
    <!--          <span v-if="form.basicSetting.level >= 1" style="padding-left: 10px;">1级佣金({{form.agentSetting.firstMoney}}%)</span>-->
    <!--          <span v-if="form.basicSetting.level >= 2" style="padding-left: 10px;">2级佣金({{form.agentSetting.secondMoney}}%)</span>-->
    <!--          <span v-if="form.basicSetting.level >= 3" style="padding-left: 10px;">3级佣金({{form.agentSetting.thirdMoney}}%)</span>-->
    <!--        </div>-->
    <!--      </el-form-item>-->
    <!--      <template v-if="form.model.isIndAgent === 1 && form.basicSetting.isOpen == 1">-->
    <!--        <el-form-item label="分销佣金类型：">-->
    <!--          <el-radio-group v-model="form.model.agentMoneyType" @change="changeMoneyType">-->
    <!--            <el-radio :label="10">百分比</el-radio>-->
    <!--            <el-radio :label="20">固定金额</el-radio>-->
    <!--          </el-radio-group>-->
    <!--        </el-form-item>-->
    <!--    -->
    <!--        <el-form-item label="单独分销设置：">-->
    <!--          <el-input type="number" min="0" v-model="form.model.firstMoney" class="max-w460">-->
    <!--            <template #prepend>-->
    <!--              一级佣金：-->
    <!--            </template>-->
    <!--            <template #append>-->
    <!--              {{ unit }}-->
    <!--            </template>-->
    <!--          </el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item v-if="form.basicSetting.level >= 2">-->
    <!--          <el-input type="number" min="0" v-model="form.model.secondMoney" class="max-w460">-->
    <!--            <template #prepend>-->
    <!--              二级佣金：-->
    <!--            </template>-->
    <!--            <template #append>-->
    <!--              {{ unit }}-->
    <!--            </template>-->
    <!--          </el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item v-if="form.basicSetting.level >= 3">-->
    <!--          <el-input type="number" min="0" v-model="form.model.thirdMoney" class="max-w460">-->
    <!--            <template #prepend>-->
    <!--              三级佣金：-->
    <!--            </template>-->
    <!--            <template #append>-->
    <!--              {{ unit }}-->
    <!--            </template>-->
    <!--          </el-input>-->
    <!--        </el-form-item>-->
    <!--      </template>-->
    <!--    </template>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      unit: "%",
      gradeUnit: "%",
      customBtn: false,
      custom_form: [],
      CustomList: [
        {
          value: "text",
          label: "文本框",
        },
        {
          value: "number",
          label: "数字",
        },
        {
          value: "email",
          label: "邮件",
        },
        {
          value: "data",
          label: "日期",
        },
        {
          value: "time",
          label: "时间",
        },
        {
          value: "id",
          label: "身份证",
        },
        {
          value: "phone",
          label: "手机号",
        },
        {
          value: "img",
          label: "图片",
        },
      ],
    };
  },
  created() {
    if (this.form.model.aloneGradeType == 20) {
      this.gradeUnit = "元";
    }
    if (this.form.model.agentMoneyType == 20) {
      this.unit = "元";
    }
    if (this.custom_form.length != 0) {
      this.customBtn = true;
    }
  },
  inject: ["form"],
  methods: {
    customMessBtn(e) {
      if (!e) {
        this.custom_form = [];
      }
    },
    addcustom() {
      if (this.custom_form.length > 9) {
        ElMessage.warning("最多添加10条");
      } else {
        this.custom_form.push({
          title: "",
          label: "text",
          value: "",
          status: false,
        });
      }
    },
    delcustom(index) {
      this.custom_form.splice(index, 1);
    },
    /*换算单位*/
    changeMoneyType: function (val) {
      if (val == "10") {
        this.unit = "%";
      } else {
        this.unit = "元";
      }
    },
    /*换算单位*/
    changeGradeType: function (val) {
      if (val == "10") {
        this.gradeUnit = "%";
      } else {
        this.gradeUnit = "元";
      }
    },
  },
};
</script>

<style scoped>
.addCustom_content {
  margin-top: 20px;

  .custom_box {
    margin-bottom: 10px;
  }
}

.addCustomBox {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--prev-color-primary);

  .btn {
    cursor: pointer;
    width: max-content;
  }
}

.titTip {
  display: inline-bolck;
  font-size: 12px;
  line-height: 24px;
  font-weight: 400;
  color: #999999;
}
.addfont {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: var(--prev-color-primary);
  margin-left: 14px;
  cursor: pointer;
}
</style>
